import React, { useEffect, useState } from "react";
// 按需导入
import * as echarts from "echarts";
import axios from "../service/index";

export default function Welcome() {
  let [list, setList] = useState([]);

  useEffect(() => {
    axios.get("/api/users/statistics/getData").then((res) => {
      // console.log(res);
      setList(res.data);
      console.log(list);
      var reactId = document.getElementById("r1");
      console.log(reactId);
      var react1 = echarts.init(reactId);
      console.log(react1);

      react1.setOption(option);
    });
  }, []);

  const option = {
    title: {
      text: "学生信息管理",
      subtext: "Fake Data",
      left: "center",
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      left: "left",
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: "50%",
        data: list.gender,
        label: {
          show: true,
          position: "outside", //outside 外部显示  inside 内部显示
          formatter: `{d}%`,
          color: "#fff", //颜色
          fontSize: 12, //字体大小
        },
      },
    ],
  };
  // };

  return (
    <div>
      Welcome
      <div id="r1" style={{ height: "400px", width: "500px" }}></div>
    </div>
  );
}
